import React from 'react';
import * as PropTypes from 'prop-types';
import { connect } from 'dva';
import moment from 'moment';

import Title from 'components/Title'
import Chart from 'components/Chart'
import MyCalendar from 'components/myCalendar'
import CustomPicker from 'components/customPicker'


const now = new Date();
const startTime = new Date(+now - 86400000 * 6)
const endTime = new Date(now)
const dateRange = [startTime, endTime];
const format = 'YYYY-MM-DD';

@connect(({ quality }) => ({ ...quality }))
class Statistics extends React.Component {
  static defaultProps = {
    chartConf: {
      type: 'Common', 
      dataSource: 'WaterQualityIndicatorsResource',
      color: ["68, 130, 255", "251, 212, 55"],
      other: { showLegend: true },
    },
  }

  constructor(props) {
    super(props);

    let value;
    if ('defaultValue' in props) {
      value = props.defaultValue;
    }

    this.state = {
      value,
      dateRange,
      startTime: moment(startTime).format(format),
      endTime: moment(endTime).format(format),
    };
  }

  componentDidMount() {
    this.init();
  }

  init = async () => {
    const { startTime, endTime, value } = this.state;

    await this.props.dispatch({
      type: 'quality/queryWaterQualityIndicators',
      payload: {
        starttime: startTime,
        endtime: endTime,
        field: value.join(''),
      }
    })
  }

  formatAbstractOption = (abstractOption) => {
    const chartColumns = {
      seriesItems: [
        { name: abstractOption['label'], field: 'value', type: 'bar' },
        { name: '国际标准', field: 'standval', type: 'line' },
      ],
      xAxis: { field: 'time', format: 'M/D' },
      yAxis: [{ name: abstractOption['unit'] }],
    }
    return chartColumns;
  }

  // 监测指标
  handleChange = (value) => {
    const lastValue = this.state.value;

    const { onChange } = this.props;
    if (onChange && value.join('') !== lastValue.join('')) {
      this.setState({
        value,
      }, async () => {
        await this.init()
      })
      onChange(value)
    }
  }
  // 选择时间
  handleCalendarChange = (dateRange) => {
    const startTime = moment(dateRange[0]).format(format)
    const endTime = moment(dateRange[1]).format(format)
    this.setState({
      dateRange,
      startTime,
      endTime,
    }, async () => {
      await this.init()
    })
  }

  render() {
    const { dateRange, value } = this.state;
    const { abstractList, chartConf } = this.props;
    const { type: chartType, dataSource, color, other } = chartConf

    const chartColumns = this.formatAbstractOption(this.props.defaultOption)

    return (<>
      <MyCalendar
        onChange={this.handleCalendarChange}
        defaultValue={dateRange}
      />
      <CustomPicker
        columns={abstractList}
        defaultValue={value}
        onChange={this.handleChange}
      />
      <Title title='水质指标检测情况' style={{ 'padding': '2%' }}>
        <Chart
          type={chartType}
          color={color}
          columns={chartColumns}
          dataSource={this.props[dataSource]}
          other = {other}
        />
      </Title>
    </>)
  }
}

Statistics.propTypes = {
  abstractList: PropTypes.array,
  onChange: PropTypes.func,
}
export default Statistics;
